import React, { useMemo } from 'react';
import { Input, AutoComplete, Popover } from 'antd';

import { QuestionCircleOutlined } from '@ant-design/icons';

import { INodeComponent } from './type';

const autoOptions = [
  { value: '@Callerid', label: '@Callerid' },
  { value: '@Calleeid', label: '@Calleeid' },
  { value: '@OriCalleeid', label: '@OriCalleeid' },
  { value: '@CRS', label: '@CRS' },
  { value: '@LineNo', label: '@LineNo' },
  { value: '@CurTimeStamp', label: '@CurTimeStamp' },
  { value: '@IsEof', label: '@IsEof' },
  { value: '@LastError', label: '@LastError' },
  { value: '@Loginflag', label: '@Loginflag' },
  { value: '@WorkID', label: '@WorkID' },
  { value: '@GroupID', label: '@GroupID' },
  { value: '@agccount', label: '@agccount' },
  { value: '@freeagccount', label: '@freeagccount' },
  { value: '@queuelen', label: '@queuelen' },
  { value: '@Pa', label: '@Pa' },
  { value: '@Pb', label: '@Pb' },
];

const renderPopverContent = () => {
  return (
    <div>
      <p style={{ marginBottom: '0px' }}>
        @CurTimeStamp:&nbsp;&nbsp;当前时间字符型，格式: 20030904102030 2003年9
      </p>
      <p style={{ marginBottom: '0px' }}>@LineNo:&nbsp;&nbsp;通道号整型</p>
      <p style={{ marginBottom: '0px' }}>
        @IsEof:&nbsp;&nbsp;记录集是否已经到是后整型不是1是
      </p>
      <p style={{ marginBottom: '0px' }}>
        @LastError:&nbsp;&nbsp;上次操作的成败标志整型0成功1失败
      </p>
      <p style={{ marginBottom: '0px' }}>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;对于外呼操作0-呼出成功，对方已经摘机
      </p>
      <p style={{ marginBottom: '0px' }}>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1 -对方占线
      </p>
      <p style={{ marginBottom: '0px' }}>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2-至号
      </p>
      <p style={{ marginBottom: '0px' }}>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;3-无响应(电路不通)
      </p>
      <p style={{ marginBottom: '0px' }}>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;4-无人应普
      </p>
      <p style={{ marginBottom: '0px' }}>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;5 -对方拒绝
      </p>
      <p style={{ marginBottom: '0px' }}>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;6-超时
      </p>
      <p style={{ marginBottom: '0px' }}>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;7 -未知原因失败
      </p>
      <p style={{ marginBottom: '0px' }}>@Callerid:&nbsp;&nbsp;主叫号码</p>
      <p style={{ marginBottom: '0px' }}>@Calleeid:&nbsp;&nbsp;被叫号码</p>
      <p style={{ marginBottom: '0px' }}>@crs:&nbsp;&nbsp;呼山流水号</p>
      <p style={{ marginBottom: '0px' }}>@loginflag:&nbsp;&nbsp;坐席注册标志</p>
      <p style={{ marginBottom: '0px' }}>@workid:&nbsp;&nbsp;坐席工号</p>
      <p style={{ marginBottom: '0px' }}>@groupid:&nbsp;&nbsp;坐席组号</p>
      <p style={{ marginBottom: '0px' }}>
        @oriCalleeid:&nbsp;&nbsp;原始被叫号码
      </p>
      <p style={{ marginBottom: '0px' }}>@PA:&nbsp;&nbsp;通用变量A</p>
      <p style={{ marginBottom: '0px' }}>@PB:&nbsp;&nbsp;通用变量B</p>
    </div>
  );
};

const renderPopver = (remarkList: any[], topologyType: string) => {
  return (
    <>
      {topologyType === 'call' ? (
        <Popover
          placement="leftTop"
          title={'系统参数说明'}
          content={renderPopverContent()}
        >
          <QuestionCircleOutlined />
        </Popover>
      ) : null}
      {remarkList?.length > 0 ? (
        <Popover
          placement="leftTop"
          title={'参数说明'}
          content={renderAutoContent(remarkList)}
        >
          <QuestionCircleOutlined />
        </Popover>
      ) : null}
    </>
  );
};

const renderAutoContent = (remarkList: any[]) => {
  return (
    <div>
      {remarkList.map((item, index) => {
        return (
          <p style={{ marginBottom: '0px' }} key={index}>
            {index + 1}、{item ? item : '--'}
          </p>
        );
      })}
    </div>
  );
};

export const NodeAutoInput: React.FC<INodeComponent> = (props) => {
  const data = useMemo(() => {
    return props?.data;
  }, [props?.data]);

  const onInputChange = (e: any) => {
    let value = e.target.value;

    if (value && props.onChange) {
      props.onChange(value);
    }
  };

  return (
    <AutoComplete
      options={autoOptions}
      onSelect={(e) => {
        if (e && props.onChange) {
          props.onChange(e);
        }
      }}
      value={props.value ?? ''}
    >
      <Input
        onChange={onInputChange}
        value={props?.value ?? ''}
        addonAfter={
          <>
            {(() => {
              let remarkList = data?.autoList?.map((i: any) => i?.remark);
              return <>{renderPopver(remarkList, 'call')}</>;
            })()}
          </>
        }
        placeholder={`请填写${data.labelName}`}
      />
    </AutoComplete>
  );
};
